

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
	科室问题病案列表
</title><link href="../css/adminCss.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="../js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <link href="../iconfont/iconfont.css" rel="stylesheet" type="text/css" />
    <!--字体图标-->
    <link href="../js/layui/css/layui.css" rel="stylesheet" media="all" />
    <script src="../js/layui/xm-select/xm-select.js"></script>
    <!--百度图表4.9-->
    <script src="../js/ECharts/echarts.min.js"></script>
    <style>

        .HeaderTitle {
            width:320px;
            font-size:16px;
            font-weight:200;
            color:#000000;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            display:inline-block;
        }
        .layui-table-view {
            width:40%;
            float:left;
        }
        #GvReportBox {
            width:60%;
            background-color:#fff;
            height:100px;
            float:left;
            overflow:scroll;
        }
        #GvReport {
            height:380px;
            width:100%;
            min-width:550px;
        }
        #GvReport2 {
            height:380px;
            width:100%;
            min-width:550px;
        }
    </style>
         
<script>
    document.onkeydown=keyListener;
    function keyListener(e){
        e = e ? e : event;
        if (e.keyCode == 13) {
            $("button[lay-filter=btnSearch]").trigger('click');
            
        }
    }

    $(function () {
        var hei = window.innerHeight;
        var tableHeight = (hei - 140) + 'px';
        $("#GvReportBox").css('height', tableHeight);
        
    })

    //折线图
        function searchYearOrDeptChangeMonth() {
            var yearStart = "";
            var yearEnd = "";
            var Deptid = "";//只单选
            var DeptName = "";
            for (let c = 0; c < $(".xm-body .selected").length; c++) {
                if (c > 0) {
                    Deptid += ",";
                }
                Deptid += $(".xm-body .selected").eq(c).attr('value');
            }
           



            var strSearchDate = $("#strSearchDate").val() + "-01";
            yearStart = $("#strSearchDate").val().substring(0,4);
            yearEnd = $("#strSearchDate").val().substring(0,4);
            if (yearStart == "" || yearEnd == "") {
                layer.msg("请先选择时间!");
                return;
            }


            $.ajax({
                type: "get",
                url: "?", //要访问的后台地址
                data: { "Method": "YearOrDeptMonthChange", "yearStart": yearStart, "yearEnd": yearEnd,"strSearchDate":strSearchDate, "Deptid": Deptid, "Time": new Date().getTime() },
                dataType: "json",
                success: function (data) {//data为返回的数据，在这里做数据绑定
                    if (data.status == 1) {
                        var thedata = eval(data.data);

                        var strsubtext = thedata.strsubtext;
                        var strXdata = thedata.strXdata;
                        var seriasdata = thedata.seriasdata;
                        var strtimer = thedata.strtimer;
                        var Zdata = [];

                        for (var i = yearStart; i <= yearEnd; i++) {
                            Zdata.push(i + "年");
                        }



                        getOptionYearDeptChangeMonth(strsubtext, strXdata, seriasdata, Zdata,strtimer);
                    }

                }
            });
        }

        //折线图 画图
        function getOptionYearDeptChangeMonth(strsubtext1 = "", strXdata = "", seriasdata = "", Zdata = "",strtimer1="") {
            var thetitle = "";//图大标题
            var seriasName = "";//节点标题
            var strsubtext = "";//图副标题
            strsubtext = strsubtext1;
            var timer = "";//时间
            timer = strtimer1;

            let dom = null;

            dom = document.getElementById("GvReport2");
            thetitle = timer + "问题病案数量统计";
            
            let myChart = echarts.init(dom);
            myChart.clear();
            var arrseria = [];//series 数组
            for (var i = 0; i < seriasdata.length; i++) {
                var seriajson = {

                    type: 'line',
                    itemStyle: {
                        normal: {

                            label: {
                                show: true,
                                position: 'top',
                                //formatter: '{c}'
                                formatter: function (params) {
                                    return params.value + "例";
                                }
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    }
                };//每个项的Json
                seriajson.data = seriasdata[i];
                seriajson.name = Zdata[i];

                arrseria.push(seriajson);

            }

            let option = {
                title: {
                    
                    text: thetitle,
                    subtext: strsubtext,
                    x: 'left',
                    y: 'top',
                    textStyle: {
                        color: "#000000",
                        fontSize:22
                    },
                    subtextStyle: {
                        color: "#000000",
                        align: "left",
                        fontSize:16,
                        verticalAlign: "bottom"
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
            
                        saveAsImage: {show: true}
                    }
                },
                grid: {
                    top: '25%',
                    bottom: '10%',
                    left: '10%',
                    right: '5%'
                },

                tooltip: {
                    trigger: 'item',
                    showDelay: 20,   // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                    hideDelay: 20,   // 隐藏延迟，单位ms
                    backgroundColor: 'rgba(210,0,0,0.9)',  // 提示框背景颜色
                    textStyle: {
                        fontSize: '14px',
                        color: '#fff'  // 设置文本颜色 默认#FFF
                    },

                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    //在（type: 'category'）中设置data有效
                    data: strXdata,

                    splitLine: { //坐标轴在 grid 区域中的分隔线；
                        show: false,
                        lineStyle: { //分割线颜色，可设单个，也可以设置数组。
                            color: 'rgba(170,172,178,0.33)'
                        }
                    },
                    axisLine: { //坐标轴轴线相关设置。就是数学上的x轴
                        show: true,
                        lineStyle: {
                            color: 'rgba(170,172,178,0.53)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            padding: [0, 0, 0, 30],    // 四个数字分别为上右下左与原位置距离
                            color: 'rgba(0,0,0,1)',
                            fontSize: 12,
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    minInterval: 1,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(170,172,178,0.33)'
                        }
                    },
                    axisLine: { //坐标轴轴线相关设置。就是数学上的y轴
                        show: true,
                        lineStyle: {
                            color: 'rgba(170,172,178,1)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(0,0,0,1)',
                            fontSize: 12,
                        },
                        formatter: function (value) {
                            return value + "例";
                        }
                    }
                }]
            };

            option.series = arrseria;//设置series

            var legend = {
                data: Zdata,
                orient: 'horizontal',
                left: 'left',
                top: "14%",
                textStyle: {
                  fontWeight: "bold",
                  fontSize: 12
                },
                type: "scroll"
            }
            option.legend = legend;


            
            // 为echarts对象加载数据 true取消合并，防止重新加载y轴数据为0
            myChart.setOption(option);
        }



    //饼图
        function searchdeptPie() {
            var Month = "";
            
            var Deptid = "";//只单选
            var DeptName = "";

            for (let c = 0; c < $(".xm-body .selected").length; c++) {
                if (c > 0) {
                    Deptid += ",";
                }
                Deptid += $(".xm-body .selected").eq(c).attr('value');
            }
            
           

            
            Month = $("#strSearchDate").val();
            if (Month == "" ) {
                layer.msg("请先选择要对比的查询月!");
                return;
            }
            Month += "-01";

            $.ajax({
                type: "get",
                url: "?", //要访问的后台地址
                data: { "Method": "ProblemDeptChange", "Month": Month,"Deptid": Deptid, "Time": new Date().getTime() },
                dataType: "json",
                success: function (data) {//data为返回的数据，在这里做数据绑定
                    if (data.status == 1) {
                        var thedata = eval(data.data);

                        var strsubtext = thedata.strsubtext;
                        var seriasdata = thedata.seriasdata;
                        var strtimer = thedata.strtimer;
                        var legenddata = thedata.legenddata;
                        getOptiondeptPie(strsubtext, strtimer,seriasdata,legenddata);
                    }

                }
            });
        }

        function getOptiondeptPie(strsubtext1 = "",strtimer1="", seriasdata = "",legenddata="") {
            var thetitle = "";//图大标题
            var strsubtext = "";//图副标题
            var timer = "";//时间
            strsubtext = strsubtext1;
            timer = strtimer1;
            let dom = null;

            dom = document.getElementById("GvReport");
            thetitle = timer + "问题项目统计";
            
            let myChart = echarts.init(dom);
            myChart.clear();
            let option = {
                title: {
                    text: thetitle,
                    subtext: strsubtext,
                    textStyle: {
                        color: "#000000",
                        fontSize:22
                    },
                    subtextStyle: {
                        color: "#000000",
                        align: "left",
                        fontSize:16,
                        verticalAlign: "bottom"
                    },
                    left: 'left'
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
            
                        saveAsImage: {show: true}
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    textStyle: {
                      fontSize: 12
                    },
                    type: "scroll",
                    pageIconSize: [20, 20],
                    pageTextStyle: {
                      fontSize: 20
                    },
                    top: "20%",
                    data:legenddata
                }
            }

            var arrseries = [];
            for (var i = 0; i < 1; i++) {
                var seriajson = {
                        name: '问题项目',
                        type: 'pie',
                        radius: '50%',
                        center:["65%","60%"],
                        label: {            //饼图图形上的文本标签
                            normal: {
                                show: true,
                                position: 'outside', //标签的位置
                                textStyle: {
                                    fontWeight: 300,
                                    fontSize: 12    //文字的字体大小
                                },
                                formatter: function (data) {

                                    return data.name + "\n" + data.percent + "%";
                                }


                            }
                        },
                       
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                }
                seriajson.data = seriasdata;
                arrseries.push(seriajson);
            }
            option.series = arrseries;
        
            myChart.setOption(option);
        }

    
</script>
</head>
<body>

    <div class="layui-form ">
        <!--顶部位置导航栏-->
        <div class="layui-card layadmin-header">
            <i class="iconfont iconshouye1"></i>&nbsp;<span id="lblPath">病案管理 >> 问题病案 >> 科室问题病案</span>
        
            <span id="HidModuId" class="nodisp">767</span>
            <span id="DeptIdChildren" class="nodisp">0</span>
            <div class="advanced-search-btn fr">
                    <button class="layui-btn  layui-btn-sm" lay-submit lay-filter="btnSearch"><i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索</button>
                </div>
                <div class="advanced-search pr10 fr">高级搜索<i class="iconfont iconarrow-down"></i></div>
                <script>
                    $(document).ready(function () {
                        $(".advanced-search").toggle(function () {
                            $(".layui-search-h").css("height", "auto");
                            $(".layui-search-h").addClass("pb5")
                            $(".advanced-search").html("高级搜索<i class='iconfont iconarrow-up'></i>");
                        }, function () {
                            $(".layui-search-h").css("height", "45px");
                            $(".layui-search-h").removeClass("pb5");

                            $(".advanced-search").html("高级搜索<i class='iconfont iconarrow-down'></i>");
                        });
                    });
            </script>
        </div>
        

        <div class="layui-body-mp" style="left: 0;">
            <div class="layui-card mt10">
                <!--顶部搜索栏-->
                <div class="layui-form layui-card-header">
                    <div class="layui-form-item " style="float:right">
                        <div class="layui-inline">
                            <label class="layui-form-label">选择科室</label>
                            <div class="layui-input-inline  select-wd120">
                                <div id="DeptId" name="DeptId" class="layui-input xm-select-demo"></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">出院时间</label>
                            <div class="layui-input-inline select-wd120">
                                <input id="strSearchDate" name="strSearchDate" value="2021-06"  type="text" class="layui-input  Wdate" check_null="出院时间必填" readonly="readonly" placeholder="出院日期-年/月" onclick="WdatePicker(({ dateFmt: 'yyyy-MM' }))">
                            </div>
                        </div>
                      

                        
                    </div>

                    <!--顶部工具栏按钮-->
                    <script type="text/html" id="toolbar">
                        <div class="layui-btn-container" style="text-align:left;">
                            <span id="lblDeptName" class="HeaderTitle">病案室</span>
                        </div>
                    </script>
                    <!--数据列表-->
                
                        <table id="GvData" lay-filter="GvData" class="layui-table" style="width:40%;float:left;"></table>
                        <div id="GvReportBox">
                            <div id="GvReport2">查看某科室问题病案数量变化图请先选择科室！然后点击搜索或按下回车即可生成图表！</div>
                            <div id="GvReport">查看科室内医师排名请先选择科室！然后点击搜索或按下回车即可生成图表！</div>
                        </div>

                   
                    
                    
                    <!--数据列表右侧操作栏-->
                    <script type="text/html" id="GvDataTabBar">


                         <a class="layui-btn layui-btn-xs" lay-event="columSee" style="text-decoration:underline;"> 医师明细</a>
                    </script>
                </div>
            </div>
        </div>
    </div>




    <script src="../js/layui/layui.js"></script>
    <script src="../js/layAdmin/global.js"></script>
    
    <script>
        layui.use(['list'], function () {
            var list = layui.list;
            var form = list.form, table = list.table, element = list.element, util = list.util, laypage = list.laypage, layer = list.layer, layedit = list.layedit;
            //-----------------------------设置页面类型---------------------------------
            //左树右列表/列表
            list.setter({ "pageType": "List" });
            //-----------------------------设置主键---------------------------------
            //table主键与tree主键
            let primaryKey = "DoctorUserId";
            list.setter({ "primaryKay": primaryKey });
            //-----------------------------是否开启部门职务搜索框下拉树---------------------------------
            //使用xm树
            list.setter({ "useXmSelect": true });
            list.setter({ "Xmheight": "400px" });
            list.setter({ "targetids": ["DeptId"], "targetimethods": ["depttree"] });

            //树加载完后再执行
            function renderTitle(field) {

                let ajaxDeptId = "";
                let ajaxstrSearchDate = "";
               
                let ajaxDeptIdChildren = 0;
                if (!!field) {
                 ajaxDeptId = field['DeptId'];
                 ajaxstrSearchDate = field['strSearchDate'];
                    ajaxDeptIdChildren = field['DeptIdChildren'];
                 
                }

                $.ajax({
                            url: "?Method=SearchChange",
                            type: "get",
                            data: {
                                'DeptId': ajaxDeptId,
                                'strSearchDate': ajaxstrSearchDate,
                                'DeptIdChildren': ajaxDeptIdChildren
                               
                            },
                            dataType: "json",
                            success: function (data) {
                                $("#strSearchDate").val(data.data.strSearchMonth);
                           
                                $("#lblDeptName").text(data.data.Deptname);
                                $("#lblDeptName").attr('title', data.data.Deptname);

                                if (data.multi == 1) {
                                    var depts = data.data.XmDeptId.split(",");
                                    var deptnames = data.data.XmDeptname.split("&");
                                    var arrjson = [];
                                    for (let i = 0; i < depts.length; i++) {
                                        arrjson.push({name:deptnames[i],value:depts[i]});
                                    }
                                    
                                    list.getter("targetList")[0].setValue(arrjson);
                                } else {
                                    if (data.data.XmDeptId) {
                                        list.getter("targetList")[0].setValue([
                                            { name: data.data.XmDeptname, value: data.data.XmDeptId }
                                        ]);
                                    }
                                    
                                }
                                
                            }, error: function (data) {
                                console.log("执行错误");
                            }
                });
            }
            function XmCallback(field) {
                renderTitle(field);
                searchYearOrDeptChangeMonth();//科室问题项目统计折线图
                searchdeptPie();//科室问题项目统计饼图
               
            }

            //--------------------------设置表格字段-----------------------
            table.render({
                elem: '#GvData'
                , cellMinWidth: 80   //单元格最小宽度
                //, even: true
                , url: '?Method=datalist&moduid=767' //数据接口
                , where: {
                    strSearchDate: $("#strSearchDate").val()
                }
                , toolbar: '#toolbar' //表格顶部工具栏
                , page: true //开启分页
                , limit: 100 //每页默认显示的数量
                , limits: [10, 20, 50, 100, 200, 500]
                , height: 'full-100' //高度自适应 需要减去固定值
                , cols: [[ //表头
                    { field: 'operate', title: '操作', toolbar: '#GvDataTabBar', width: 80, fixed: 'left', align: 'center' }
                    , { field: 'Deptname', title: '科室',width: 130 }
                    , { field: 'RankNum', title: '排名', width: 80 }
                    , { field: 'RealName', title: '医师', align: 'center', width: 80 }
                    , { field: 'Num', title: '问题病案数量', align: 'center', width: 80 }

                ]]
                , done: function (res) {
                    if (list.getter("useXmSelect")) {
                        list.elRenderXmSelect({"contain":0,"callback":XmCallback,"type":"list"});//表格加载完后再执行xm-select的渲染
                    }
                    if (list.getter("useelement")) {
                        element.render();//进度条渲染
                    }

                    if (res.count == 0) {
                        //页面首次加载（非搜索），如果程序报错或者没有查找到数据，执行该语句
                        document.documentElement.querySelectorAll(".layui-table-body .layui-none")[0].innerHTML = res.msg;
                    }
                        
                }
            });


            //-----------------------------------------监听右侧操作栏------------------------------------------
            table.on('tool(GvData)', function (obj) {
                var data = obj.data;//选中的行数据 
                var primaryid = data[primaryKey]; //当前选中行id，根据需要设置
                if (obj.event === 'columSee') {  //查看明细

                    if ($("#strSearchDate").val() == "") {
                        layer.msg('请选择出院日期');
                    } else {
                        url = 'MedicalRecord/DeptMedicalRecordDetail.aspx?fromlayui=1&tableid=GvData&strSearchDate=' + $("#strSearchDate").val()+'&UserId='+primaryid;
                        list.funTopOperation({ "type": "Open", "title": "医师问题病案明细", "url": url, "area": ['800px', '500px'], "onlyShow": true, "btn": ['关闭'] })(data);

                    }
                    
                }
            });







            //--------------------------------------------顶部工具条事件监听-----------------------------------------------
            //顶部按钮lay-event的值需要以btn开头
            list.funToolbar({ "tableID": "GvData", "seleAll": 1 });





            //-----------------------------------------加载搜索与开关事件-------------------------------------
            
            list.funSearch({callback:XmCallback});

            

        });
    </script>





    <script type="text/javascript" src="../js/rows.js"></script>
    <script type="text/javascript" src="../js/check.js"></script>
    <script src="../PopupWin/lhgdialog.min.js" type="text/javascript"></script>
    
    <script>
        $(document).ready(function () {
            try {
                parent.window.MpLoading(0);
            } catch (e) { }
        });
    </script>
</body>
</html>
